<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    {{seo}}
    <title>{{$title}}</title>
    <meta name="keyword" content="{{$keyword}}" />
    <meta name="description" content="{{$describe}}" />
    {{/seo}}
    <link rel="stylesheet" href="{{$static_path}}/static/common/css/reset.css">
    <link rel="stylesheet" href="{{$static_path}}/static/common/css/swiper_2.7.css">
    <link rel="stylesheet" href="{{$static_path}}/static/common/css/header.css">
    <link rel="stylesheet" href="{{$static_path}}/static/common/css/footer.css">
    <link rel="stylesheet" href="{{$static_path}}/static/css/college/college-knowledge1.css">
    <link rel="stylesheet" href="{{$static_path}}/static/common/css/common.css">
    <script src="{{$static_path}}/static/common/js/jquery-1.11.3.js"></script>
    <script src="{{$static_path}}/static/common/js/swiper_2.7.js"></script>
</head>

<body>
    <!-- 头部部分 -->
    {{include file="header.tpl"}}
    <!-- 内容区域 -->
    <div class="zs-detail">
        <div class="zs-content">
            {{details}}
            <div class="left-content">
                <h2>{{$title}}</h2>
                <p class="title">
                上传日期：<span>{{$add_time}}</span>
                点击量：<span>{{$pc_count}}</span>
                {{if $source != ''}}来源：<span>{{$source}}</span>{{/if}}
                {{if $author != ''}}作者： <span>{{$author}}</span></p>{{/if}}
                <div class="ly">
                    {{$main_content}}
                </div>
            </div>
            {{/details}}

            <div class="right-content">
                <div class="book-mode-tab">

                    <div class="book-mode-item second  active">
                        <div data-title="课程推荐">
                            <ul class="radius_book">
                                {{content flag='c' pageSize=6}}
                                {{counter start=0 skip=1 print=false}}
                                {{if count($list) > 0}}
                                <li>
                                    {{if count($list) > 0}}
                                    <a href="{{$list[0]['url']}}">
                                        <div><span>{{counter}}</span>
                                            <p>{{$list[0]['title']|truncate:14:'...'}}</p> <img src="{{$static_path}}/static/images/eolleg-zs1/yan_img.png"
                                                alt="">
                                        </div>
                                    </a>
                                    {{/if}}
                                    {{if count($list) > 1}}
                                    <a href="{{$list[1]['url']}}">
                                        <div><span>{{counter}}</span>
                                            <p>{{$list[1]['title']|truncate:14:'...'}}</p> <img src="{{$static_path}}/static/images/eolleg-zs1/yan_img.png"
                                                alt="">
                                        </div>
                                    </a>
                                    {{/if}}
                                    {{if count($list) > 2}}
                                    <a href="{{$list[2]['url']}}">
                                        <div><span>{{counter}}</span>
                                            <p>{{$list[2]['title']|truncate:14:'...'}}</p> <img src="{{$static_path}}/static/images/eolleg-zs1/yan_img.png"
                                                alt="">
                                        </div>
                                    </a>
                                    {{/if}}
                                </li>
                                {{/if}}
                                {{if count($list) > 3}}
                                <li>
                                    {{if count($list) > 3}}
                                    <a href="javascript:;">
                                        <div><span>{{counter}}</span>
                                            <p>{{$list[3]['title']|truncate:14:'...'}}</p> <img src="{{$static_path}}/static/images/eolleg-zs1/yan_img.png"
                                                alt="">
                                        </div>
                                    </a>
                                    {{/if}}
                                    {{if count($list) > 4}}
                                    <a href="{{$list[4]['url']}}">
                                        <div><span>{{counter}}</span>
                                            <p>{{$list[4]['title']|truncate:14:'...'}}</p> <img src="{{$static_path}}/static/images/eolleg-zs1/yan_img.png"
                                                alt="">
                                        </div>
                                    </a>
                                    {{/if}}
                                    {{if count($list) > 5}}
                                    <a href="{{$list[5]['url']}}">
                                        <div><span>{{counter}}</span>
                                            <p>{{$list[5]['title']|truncate:14:'...'}}</p> <img src="{{$static_path}}/static/images/eolleg-zs1/yan_img.png"
                                                alt="">
                                        </div>
                                    </a>
                                    {{/if}}
                                </li>
                                {{/if}}
                                {{/content}}


                                <!-- 查看全部：超过四条时显示？ -->
                                <a href="/shangqisuo">查看全部</a>
                            </ul>
                        </div>
                    </div>
                    <div class="book-mode-item third">
                        <div data-title="学习笔记">
                            <form id="study" style="height: 100%;">
                                <input type="hidden" name="id" value="1">
                                <div class="study-note">
                                    <p id="today">2020/1/2</p>
                                    <div class="study-note-title data-title" data-title="标题">
                                        <span class="txt-titles">标题</span>
                                        <div>
                                            <input type="text" maxlength="10" id="worksName" name="title">
                                            <span><b class="nums1">0</b>/10</span>
                                        </div>
                                    </div>
                                    <div class=" study-note-content data-title">
                                            <h3 class="h3-txt">笔记内容</h3>
                                            <div class="kuang-box">
                                                <textarea maxlength="2000" id="worksContent" name="note_content" 
                                                    placeholder="随手记录学习心得..."></textarea>
                                                <span><b class="nums2">0</b>/2000</span>
                                            </div>
                                            <button type="button" id="addStudy">保存笔记</button>
                                        </div>
                                        <!-- 查看全部：超过四条时显示？ -->
                                        <!-- <a href="javascript:;">全部笔记</a> -->
                                    </div>
                            </form>
                        </div>
                    </div>
                </div>
                <!-- 弹窗样式 -->
                <div class="tc_box" style="display: none;">
                    保存成功
                </div>
            </div>
            <div class="timer-box">
                <img src="{{$static_path}}/static/images/eolleg-zs1/timer-lz.png" alt="">
                <div class="timers">
                    <p>学习时间</p>
                    <div class="times-txt" id="mytime">00:00:00</div>
                </div>
            </div>
        </div>
    </div>


    </div>
    
    <!--放一个id为footer的div,把footer.html加载到这块-->
    {{include file="footer2.tpl"}}
    <!-- 底部部分 -->
    <!-- 底部部分 -->
</body>

<!-- 加载头尾 -->

<script src="{{$static_path}}/static/common/js/load.js"></script>

<script>
    $('.book-mode-item').click(function () {
        $(this).addClass('active').siblings().removeClass('active')
    })

    window.onload = function () {

        function two_char(n) {
            return n >= 10 ? n : "0" + n;
        }
        function time_fun() {
            var sec = 0;
            setInterval(function () {
                sec++;
                var date = new Date(0, 0)
                date.setSeconds(sec);
                var h = date.getHours(), m = date.getMinutes(), s = date.getSeconds();
                document.getElementById("mytime").innerText = two_char(h) + ":" + two_char(m) + ":" + two_char(s);
                // 当前时间
                var timers = two_char(h) + ":" + two_char(m) + ":" + two_char(s);
                // 刷新页面时候执行一面时间获取当前时间
                window.onbeforeunload = function (e) {
                    e = e || window.event;
                    console.log(timers);
                    // 这是当前结束时间
                    sessionStorage.setItem('value',timers)
                }
            }, 1000);
        }
        time_fun()


        /*提交学习笔记*/
        $("#addStudy").click(function(){
            var data = $('form#study').serialize()
            // console.log(data)
            $.ajax({
                type: 'POST',
                dataType: 'json',
                url: "/dynamic/add",
                data: data,
                success: function(data){
                    // console.log(data)
                    if(data.code == 0){
                        // console.log('ok');
                        $('.tc_box').html('提交成功');
                        $('form#study')[0].reset()
                    }else{
                        $('.tc_box').html(data.info);
                    }
                    $('.tc_box').show();


                    setTimeout(function(){
                        $('.tc_box').html('');
                        $('.tc_box').hide(100)
                    },1500)

                },
                error: function(){
              
                }
            })
        })

    }

    //10个字符的按下弹起事件
    $('#worksName').keyup(function(){
        if($('#worksName').val().length <=10){
            $('.nums1').html($('#worksName').val().length)
        }
    
    })
    $('#worksName').keydown(function(){
        if($('#worksName').val().length <=10){
            $('.nums1').html($('#worksName').val().length)
        }
    
    })
    //  200字符的按下弹起事件
    $('#worksContent').keyup(function(){
        if($('#worksContent').val().length<=2000){
            $('.nums2').html($('#worksContent').val().length)
        }
    
    })
    $('#worksContent').keydown(function(){
        if($('#worksContent').val().length<=2000){
            $('.nums2').html($('#worksContent').val().length)
        }
    })






</script>

</html>